<template>
	<div>
		<div class="article-content">
			<h1 class="article-title">{{articleContent.title}}</h1>
			<div class="article-info">
				<div class="art-footer">
					<time class="bot"><Icon type="ios-calendar-outline" /> {{articleContent.createTime|dateformatDate}}</time>
					<span class="sp">/</span>
					<span class="bot"><Icon type="ios-eye-outline" style="font-size: 24px;vertical-align:-.185em"/> {{articleContent.readNum}}</span>
					<span  class="sp">/</span>
					<span class="bot"><Icon type="ios-heart-outline" /> {{articleContent.likeNum}}</span>
					<Tag  fade v-for="(tag,tagIndex) in articleContent.articleTagPojoList" :key="tagIndex"
					:color="tag.color" >{{tag.name}}</Tag>
				</div>
			</div>
			
			<div class="desc-img" v-if="articleContent.cover" :style="{backgroundImage:'url('+articleContent.cover+')'}"></div>
			<div class="desc-info">
				<p >{{articleContent.description}}</p>
			</div>
			<div class="article-body">
				<p    v-html="articleContent.contentFormat"></p>
				<p class="end">———————the end———————</p>
			</div>
			<Spin size="large" fix v-if="spinShow"></Spin>
		</div>
		<CommentVssueGithub :title="'笑忘书评论||id:'+$route.query.id"></CommentVssueGithub>
	</div>
</template>

<script>
import CommentVssueGithub from '@/components/common/CommentVssueGithub.vue'
export default {
	name: 'NovelContent',
	components: {
		CommentVssueGithub
	},
	data:()=>{
		return{
			articleContent:{},
			spinShow:false,
		}  
	},
	props: {
	},
	methods:{
		getArticleById(){
			let id = this.$route.query.id;
			this.spinShow = true;
			this.$http.get('/api/article/getArticleById',{params:{id:id}}).then(res=>{
				this.articleContent = res;
				this.spinShow = false;
			})
		}  
	},
	computed:{
	},
	created() {
		this.getArticleById();
	},
	watch: {
		'$route' () {
			// 对路由变化作出响应...
			// 解决相同组件间跳转 组件被复用 周期函数失效
			this.getArticleById();
		}
	}
  
}
</script>

<style scoped="scoped" lang="stylus">
.ql-container.ql-snow
	border 0
.article-content
	background-color #fff
	min-height 20vh
	padding 20px 20px
	border-radius 10px
	position relative
	overflow hidden
	box-shadow 0 0 0 1px rgba(0,0,0,.02), 0 4px 10px rgba(0,0,0,.06)
	.article-title
		font-size 30px
		color #444
		margin-bottom 10px
		line-height 42px
		font-weight 400
		text-transform none
		vertical-align baseline
		display inline
		transition background-size .3s cubic-bezier(0.215,.61,.355,1)
		background-size 100% 150%
	.article-title:hover
		background-size 100% 100%
		background-image linear-gradient(to top,transparent,transparent 0,#fd0 0,#fd0 7px,transparent 7px)
	.article-info
		color rgba(0,0,0,.5)
		font-size 13px
		margin-bottom 10px
		.art-footer
			width 100%
			height 35px
			display flex
			align-items center
			.sp
				padding-right 10px
			.bot 
				line-height 35px
				color #8f8f8f
				font-size 14px
				padding-right 10px
				cursor pointer
				.ivu-icon
					font-size 1.25rem
			.tag
				margin 0 10px
	.desc-img 
		height 220px
		width 100%
		background-size cover
		background-position center
		background-repeat no-repeat
		margin 20px 0
	.desc-info
		background #9CCC65
		padding 25px
		margin-bottom 20px
		color #fff
		opacity .8
		border-radius 10px
	.article-body
		font-size 12px;
		line-height 1.8em
		color rgba(0,0,0,.8)
		margin-bottom: 20px
		letter-spacing: 1px
		.end
			text-align center
			padding-top 80px
.ivu-tag
	height 18px
	line-height 18px
</style>
